<template>
  <div>
    <SearchForm
      v-model="formOption.data"
      :form-option="formOption"
      :btn-list="btnList"
      :show-btn="true"
      label-width="90px"
    />
    <PageTable
      :loading="loading"
      :options="options"
      :columns="columns"
      :data="dataSource"
      @selectChange="selectChange"
    />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
export default {
  name: 'LoginLog',
  data() {
    return {
      formOption: {
        data: {},
        items: [
          {
            type: 'input',
            label: '登录用户',
            value: 'name',
            style: {
              width: '220px'
            },
            placeholder: '请输入登录用户姓名或者电话'
          },
          {
            type: 'datetimerange',
            label: '登录时间',
            value: 'time',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getList()
          }
        },
        {
          label: '导出',
          loading: false,
          model: 'export',
          onClick: () => {
            this.exportFile()
          }
        }
      ],
      columns: [
        {
          prop: 'createdTime',
          label: '登录时间'
        },
        {
          prop: 'userName',
          label: '登录用户',
          render: (h, { row }) => {
            return (
              <div>
                <p>{row.userName}</p>
                <p>{row.telephone}</p>
              </div>
            )
          }
        },
        {
          prop: 'ip',
          label: '登录IP'
        },
        {
          prop: 'provinceName',
          label: '所在地区',
          render: (h, { row }) => {
            return (
              <span>
                {row.provinceName}
                {row.cityName}
              </span>
            )
          }
        }
      ],
      loading: true,
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      options: {
        select: true,
        border: true
      },
      dataSource: [],
      selectList: []
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    async getList() {
      const params = {
        ...this.listQuery
      }
      const { name, time } = this.formOption.data
      if (name) params.name = name
      if (time) params.startTime = time[0]
      if (time) params.endTime = time[1]
      const {
        data: { records, total }
      } = await this.$http.system.log.getLoginLog({ params })
      this.dataSource = records
      this.total = total
      this.loading = false
    },
    selectChange(val) {
      this.selectList = val
    },
    exportFile() {
      if (!this.selectList.length) return this.$message.error('请选择要导出的数据')
      const headerData = this.columns.map(item => item.label)
      headerData.splice(2, 0, '手机号码')
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      filterData.splice(2, 0, 'telephone')
      const list = this.$lodash.cloneDeep(this.selectList)
      const tableData = list.map(item => {
        item.provinceName = `${item.provinceName}${item.cityName}`
        return item
      })
      export2Excel(headerData, tableData, filterData, '登录日志', () => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
